<template>
	<view style="position: relative;top: -20rpx">
		<uni-section type="line" title="果蔬信息">
		</uni-section>
		<!-- 果蔬信息 -->
		<view v-if="!service.check.isNull(goodsInfo)">
			<uni-card :title="item.title" :is-shadow="true" v-for="(item,index) in goodsInfo" :key="index">
				<view>
					<view style="display: inline-block">
						<view>
							<text class="my-label">ID :</text>
							<text class="my-content">{{ item.id }}</text>
						</view>
						<view>
							<text class="my-label">简介 :</text>
							<text id="text-overflow" class="my-content">{{ item.overview }}</text>
						</view>
						<view>
							<text class="my-label">单价 :</text>
							<text class="my-content priceFont">{{ item.standardPrice }}</text>
							<text style="margin-left: 5px">元</text>
						</view>
						<view v-if="!service.check.isNull(item.amount)">
							<text class="my-label">购买数量 :</text>
							<text class="my-content">{{ item.amount }}</text>
						</view>
						<view>
							<text class="my-label">总价格 :</text>
							<text class="my-content priceFont">{{ item.price }}</text>
							<text style="margin-left: 5px">元</text>
						</view>
					</view>
					<view style="
                float: right;
                display: inline-block;
                line-height: 120px;">
						<u--image width="120" height="120" shape="circle" :src=item.avatar
							@click="service.previewImg([item.avatar])">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image>
					</view>
				</view>
			</uni-card>

		</view>

		<!-- 订单信息 -->
		<view v-if="!service.check.isNull(orderInfo)">
			<uni-section type="line" title="订单信息">
			</uni-section>
			<view>
				<uni-card :title="'订单编号 : ' + orderInfo.orderNum" :is-shadow="true">
					<view>
						<view>
							<text class="my-label">菜地 ID :</text>
							<text class="my-content">{{ orderInfo.plotId }}</text>
						</view>
						<u-row>
							<u-col :span="6">
								<view>
									<text class="my-label">用户昵称 :</text>
									<text class="my-content">{{usInfo.nick}}</text>
								</view>
							</u-col>
							<u-col :span="6">
								<view>
									<text class="my-label">用户头像 :</text>
									<view style="display: inline-block;vertical-align:middle;">
										<u--image width="40" height="40" shape="circle" :src=usInfo.avatar
											@click="service.previewImg([usInfo.avatar])">
											<view slot="error" style="font-size: 24rpx;">加载失败</view>
										</u--image>
									</view>
								</view>
							</u-col>
						</u-row>

						<view>
							<text class="my-label">下单时间 :</text>
							<text class="my-content">{{service.style.time(orderInfo.createTime,6)}}</text>
						</view>

						<view>
							<text class="my-label">订单状态 :</text>
							<view class="richTextView">
								<rich-text :nodes="style.orderStatus(orderInfo.status)"></rich-text>
							</view>
						</view>

						<view v-if="!service.check.isNull(orderInfo.payTime)">
							<text class="my-label">付款时间 :</text>
							<text class="my-content">{{service.style.time(orderInfo.payTime,6)}}</text>
						</view>

						<view v-if="!service.check.isNull(orderInfo.score)">
							<text class="my-label">抵扣积分 :</text>
							<text class="my-content">{{orderInfo.score}}</text>
						</view>

						<view>
							<text class="my-label">用户应付 :</text>
							<text class="my-content priceFont">{{orderInfo.totalPrice}}</text>
							<text style="margin-left: 5px">元</text>
						</view>

						<view>
							<text class="my-label">用户实付 :</text>
							<text class="my-content priceFont">{{orderInfo.realPrice}}</text>
							<text style="margin-left: 5px">元</text>
						</view>

						<view v-if="!service.check.isNull(orderInfo.remark)">
							<text class="my-label">用户备注 :</text>
							<text class="my-content">{{orderInfo.remark}}</text>
						</view>

						<view v-if="!service.check.isNull(orderInfo.img)">
							<text class="my-label">用户上传的照片 :</text>
							<view style="margin-right: 5px" v-for="(item,index) in orderInfo.img" :key="index">
								<u--image width="80" height="80" :src=item
									@click="service.previewImg(orderInfo.img,index)">
									<view slot="error" style="font-size: 24rpx;">加载失败</view>
								</u--image>
							</view>
						</view>

					</view>
				</uni-card>
			</view>
		</view>

		<!-- 售后信息 -->
		<view v-if="!service.check.isNull(afterSale)">
			<uni-section type="line" title="售后审核信息">
			</uni-section>
			<uni-card :is-shadow="true">
				<view>
					<text class="my-label">用户退款理由 :</text>
					<text class="my-content">{{ afterSale.redundReason}}</text>
				</view>

				<view v-if="!service.check.isNull(afterSale.content)">
					<text class="my-label">详细描述 :</text>
					<text class="my-content">{{afterSale.content}}</text>
				</view>

				<view v-if="!service.check.isNull(afterSale.img)" style="margin: 10px 0">
					<text class="my-label">图像凭证 :</text>
					<view style="margin-right: 5px;display: inline-block;vertical-align:middle;">
						<u--image width="80" height="80" :src=afterSale.img
							@click="service.previewImg([afterSale.img])">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image>
					</view>
				</view>

				<view>
					<text class="my-label">退款类型 :</text>
					<view class="richTextView">
						<rich-text :nodes="style.refundType(afterSale.refundType)">
						</rich-text>
					</view>
				</view>

				<view>
					<text class="my-label">售后状态 :</text>
					<view class="richTextView">
						<rich-text :nodes="style.saleStatus(afterSale.status)">
						</rich-text>
					</view>
				</view>

				<view v-if="afterSale.status === -1">
					<text class="my-label">拒绝退款原因 :</text>
					<text
						class="my-content">{{!service.check.isNull(afterSale.refusedReason) ? afterSale.refusedReason : "无"}}</text>
				</view>

				<view>
					<text class="my-label">退款金额 :</text>
					<text class="my-content priceFont">{{ afterSale.refundAmount}}</text>
					<text style="margin-left: 5px">元</text>
				</view>

				<view v-if="afterSale.status === 0" style="margin-top: 10px;">
					<u-row :gutter="5">
						<u-col :span="6">
							<u-button type="primary" @click="options.confirmRefund.open">
								<text>同意退款</text>
							</u-button>
						</u-col>
						<u-col :span="6">
							<u-button type="success" @click="options.refusedRefund.open">
								<text>拒绝退款</text>
							</u-button>
						</u-col>
					</u-row>
				</view>

			</uni-card>
		</view>
		<u-popup mode="top" :round="10" :show="options.confirmRefund.show" @close="options.confirmRefund.close">
			<view>
				<view style="text-align: center;margin: 40rpx 0">
					<text style="font-size: 40rpx;
              font-weight:bold;color: #f50c0cc9;
              Letter-spacing:6rpx">
						确认同意退款吗?
					</text>
				</view>
				<view style="margin: 0 10rpx 10rpx 10rpx">
					<u-row :gutter="5">
						<u-col :span="6">
							<u-button type="primary" @click="audit(1)">
								<text>确认</text>
							</u-button>
						</u-col>
						<u-col :span="6">
							<u-button type="success" @click="options.confirmRefund.close">
								<text>取消</text>
							</u-button>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-popup>

		<u-popup mode="top" :round="10" :show="options.refusedRefund.show" @close="options.refusedRefund.close">
			<view>
				<view style="text-align: center;margin: 40rpx 0">
					<text style="font-size: 40rpx;
              font-weight:bold;color: #f50c0cc9;
              Letter-spacing:6rpx">
						确认拒绝退款吗?
					</text>
					<view>
						<view style="margin: 10px">
							<u--textarea v-model="options.refusedRefund.reason" :maxlength="255" :autoHeight=true
								:count=true placeholder="输入拒绝退款理由">
							</u--textarea>
						</view>
					</view>
				</view>
				<view style="margin: 0 10rpx 10rpx 10rpx">
					<u-row :gutter="5">
						<u-col :span="6">
							<u-button type="primary" @click="audit(-1,options.refusedRefund.reason)">
								<text>确认</text>
							</u-button>
						</u-col>
						<u-col :span="6">
							<u-button type="success" @click="options.refusedRefund.close">
								<text>取消</text>
							</u-button>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-popup>


		<!--自己封装的提示器-->
		<popup ref="popup" />
	</view>
</template>

<script>
	import service from "../../../utils/service";
	import UFormItem from "../../../uni_modules/uview-ui/components/u-form-item/u-form-item";
	import popup from "@/merchant/my/my-popup"
	export default {
		components: {
			UFormItem,
			popup
		},
		data() {
			let _vm = this;
			return {
				service: service,
				/* 商品信息 也就是 果蔬信息 */
				goodsInfo: null,
				/* 订单信息 */
				orderInfo: null,
				/* 售后信息 */
				afterSale: null,
				/* 用户信息 */
				usInfo: null,

				options: {
					/* 同意售后处理 */
					confirmRefund: {
						show: false,
						close() {
							_vm.options.confirmRefund.show = false;
						},
						open() {
							_vm.options.confirmRefund.show = true;
						}
					},
					/* 拒绝售后处理 */
					refusedRefund: {
						/* 拒绝理由 */
						reason: '',
						show: false,
						close() {
							_vm.options.refusedRefund.def();
							_vm.options.refusedRefund.show = false;
						},
						open() {
							_vm.options.refusedRefund.def();
							_vm.options.refusedRefund.show = true;
						},
						def() {
							_vm.options.refusedRefund.reason = ''
						}
					}
				},
				/* 样式对象 */
				style: {
					/* 退款类型 */
					refundType(v) {
						switch (v) {
							case 1:
								return "<span style='color:#2ed573;'>仅退款</span>"
							case 2:
								return "<span style='color:#eccc68;'>退货退款</span>"
						}
					},
					/* 售后状态 */
					saleStatus(v) {
						switch (v) {
							case 0:
								return "<span style='color:#2ed573;'>审核中</span>"
							case 1:
								return "<span style='color:#1e90ff'>待寄回</span>"
							case 2:
								return "<span style='color:#ffa502'>已退款</span>"
							case -1:
								return "<span style='color:#ff4757'>已拒绝</span>"
						}
					},
					/* 订单状态 */
					orderStatus(v) {
						switch (v) {
							case 0:
								return '<span style="color:#7bed9f">待付款</span>'
							case 1:
								return '<span style="color:#70a1ff">已付款</span>'
							case 2:
								return '<span style="color:#1e90ff">已核验</span>'
							case 3:
								return '<span style="color:#0984e3">待评价</span>'
							case 4:
								return '<span style="color:#ffa502">已完成</span>'
							case -1:
								return '<span style="color:#ff4757">已取消</span>'
							case -2:
								return '<span style="color:#ffa502">已退款</span>'
						}
					}
				}
			}
		},
		methods: {
			getInfo(id) {
				let _t = this;
				if (service.check.isNull(id)) {
					console.log("没有得到订单id")
					return
				}
				uni.showLoading({
					title: "获取数据中请稍后",
					mask: true
				})
				this.$axios({
					url: 'merchant/merchantVegetable/orderDetail',
					method: 'post',
					data: {
						orderNum: id
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then(res => {
					console.log("merchant/merchantVegetable/orderDetail : ", res)
					if (res.code === 0) {

						// 得到商品快照也就是果蔬信息
						let snapshot = res.result.order.snapshot;
						if (service.check.isNull(snapshot)) {
							_t.$refs.popup.error("果蔬(商品)信息丢失...")
						} else {
							let arr = JSON.parse(snapshot);
							// 商品主图 拼接上 地址
							arr = arr.map(e => {
								if (!e.avatar.includes(_t.imgApi)) {
									e.avatar = _t.imgApi + e.avatar
									return e
								}
							})
							_t.goodsInfo = arr
							_t.orderInfo = res.result.order
							if (!service.check.isNull(_t.orderInfo.img)) {
								_t.orderInfo.img = _t.orderInfo.img.split(",").map(e => {
									if (!e.includes(_t.imgApi)) {
										e = _t.imgApi + e;
									}
									return e;
								})
							}
							_t.afterSale = res.result.afterSale
							if (!service.check.isNull(_t.afterSale)) {
								if (!service.check.isNull(_t.afterSale.img)) {
									_t.afterSale.img = _t.imgApi + _t.afterSale.img;
								}
							}
							_t.usInfo = {
								avatar: res.result.avatar,
								nick: res.result.nick
							}
						}
					}
					uni.hideLoading()
				})
			},
			/* 售后审核 status 2 已退款 */
			audit(status, refuseReason) {
				let _t = this
				let data = {
					id: _t.afterSale.id,
					status: status,
				}

				if (status === -1) {
					if (!service.check.isNull(refuseReason)) {
						data.refusedReason = refuseReason;
					} else {
						_t.options.refusedRefund.close();
						_t.$refs.popup.error("请酌情,输入合适的拒绝退款理由!!!", 4000)
						return;
					}
				}
				uni.showLoading({
					title: "提交中....",
					mask: true
				})
				this.$axios({
						url: 'merchant/merchantGoods/auditAfterSale',
						method: 'post',
						data: data,
						header: {
							"Authorization": this.token,
							"Content-type": this.contentType,
							"type": "merchantsToken"
						},
					}).then(res => {
						console.log("admin/merchantManage/audit : ", res);
						if (res.code === 0) {
						  _t.getInfo(_t.orderInfo.orderNum)
							_t.$refs.popup.success('提交成功');
						} else {
							_t.$refs.popup.error(res.message);
						}
					})
					.finally(function() {
						_t.options.confirmRefund.close()
						_t.options.refusedRefund.close()
						uni.hideLoading();
					})
			}
		},
		onLoad(e) {
			// 获取图像地址前缀
			this.imgApi = this.$reqConfig.URLIMAGE
			// 获取请求头类型
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			// 获取token
			this.token = uni.getStorageSync("merchantsToken").token
			console.log("路由传值 : ", e)
			this.getInfo(e.id)
		},
	}
</script>

<style lang="scss">
	.uni-card {
		margin: 5px 5px !important;
	}

	/deep/.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
		font-size: 15px !important;
		color: #3a3a3a !important;
		font-weight: bold !important;
	}

	/*内容标题 label*/
	.my-label {
		display: inline-block;
		margin: 10rpx 10rpx 10rpx 0;
		font-size: 29rpx;
		font-weight: bold;
		color: rgba(104, 173, 232, 0.72);
	}

	/*正文 */
	.my-content {
		font-size: 26rpx;
		font-weight: bold;
	}

	.richTextView {
		display: inline-block;
		font-size: 15px;
		font-width: bold;
	}

	.priceFont {
		color: #e74b4b;
	}

	/*标题分割线样式*/
	/deep/ .line.data-v-5584ec96 {
		height: 15px;
		background-color: #0dd8ae !important;
		border-radius: 5px;
		width: 7px !important;
	}

	/deep/.uni-section__content-title.data-v-5584ec96 {
		font-size: 34rpx !important;
	}

	#text-overflow {
		white-space: nowarp;
		/*强制在一行显示*/
		over-flow: hidden;
		/*溢出隐藏*/
		text-overflow: ellipsip;
		/*溢出显示省略号*/
	}

	.uni-section {
		background-color: #ffffff !important;
	}
</style>
